<template>
    <div>

        <el-form
                v-if="allocation.taskType == 1"
                class="form-detail"
                label-position="right"
                label-width="120px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="招商类型：">
                        {{ getLabel('plan_type', datas.planDetail?.detailPlanType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划招商地区：">
                        {{ datas.planDetail?.areaName ? datas.planDetail?.cityName + "/" + datas.planDetail?.areaName : datas.planDetail?.cityName ? datas.planDetail?.cityName : datas.planDetail?.provinceName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="代理周期：">
                        <span>{{ datas.planDetail?.agentCycle }}年</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="最低销量：">
                        <span v-if="datas.planDetail?.isIncrease == 1">{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }}/年</span>
                        <span v-else-if="datas.planDetail?.isIncrease == 2">首年{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }},每年递增{{ datas.planDetail?.increaseNum }}%</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="销量保证金：">
                        <span v-if="datas.planDetail?.sellEarnestMoney">{{ datas.planDetail?.sellEarnestMoney }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="其他说明：">
                        <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务期限：">
                        {{ dateFormat("yyyy-mm-dd", datas.planInfo?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配人：">
                        {{ creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allocation.ifAccept == 2 || allocation.ifAccept == 3">
                    <el-form-item :label="allocation.ifAccept == 2 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allocation.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <el-form
                v-else-if="allocation.taskType == 2"
                class="form-detail"
                label-position="right"
                label-width="120px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="准入模式：">
                        {{ getLabel('access_mode', datas.planInfo?.accessMode) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端价：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="priceClick"
                        >
                            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="招商终端名称：">
                        {{ datas.planDetail?.terminalName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端地址：">
                        <span v-if="datas.planDetail?.terProvinceName">{{
            datas.planDetail?.terProvinceName
          }}/{{ datas.planDetail?.terCityName }}/{{ datas.planDetail?.terAreaName }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端类型：">
                        {{ getLabel('app_mode', datas.planInfo?.terminalType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端开发期限：">
                        {{ dateFormat('yyyy-mm-dd', datas.planDetail?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="开发保证金：">
                        <span v-if="datas.planDetail?.devEarnestMoney">{{ datas.planDetail?.devEarnestMoney }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="最低销量：">
                        <span v-if="datas.planDetail?.minSale">{{
            datas.planDetail?.minSale
          }}{{
            getLabel('sell_unit', datas.planInfo?.sellUnit)
          }}/{{ getLabel('sell_num_unit', datas.planDetail?.minSaleUnit) }}</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="销量保证金：">
                        <span v-if="datas.planDetail?.sellEarnestMoney">{{ datas.planDetail?.sellEarnestMoney }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="其他说明：">
                        <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配人：">
                        {{ creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allocation.ifAccept == 2 || allocation.ifAccept == 3">
                    <el-form-item :label="allocation.ifAccept == 2 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allocation.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <el-form
                v-else-if="allocation.taskType == 3"
                class="form-detail"
                label-position="right"
                label-width="150px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="产品属性：">
                        <span> {{ getLabel('product_attribute', datas.planInfo?.productAttribute) }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端价：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="priceClick"
                        >
                            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划地区：">
                        <span v-if="datas.planDetail?.provinceName">{{
              datas.planDetail?.provinceName
            }}/{{ datas.planDetail?.cityName }}/{{ datas.planDetail?.areaName }}/{{ datas.planDetail?.streetName }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划开发终端数量：">
                        {{ datas.planDetail?.devTerminalNum }} 家
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务期限：">
                        {{ dateFormat("yyyy-mm-dd", datas.planInfo?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="其他说明：">
                        <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配人：">
                        {{ creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allocation.ifAccept == 2 || allocation.ifAccept == 3">
                    <el-form-item :label="allocation.ifAccept == 2 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allocation.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <el-form
                v-else-if="allocation.taskType == 4"
                class="form-detail"
                label-position="right"
                label-width="120px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="交易价：">
                        {{ datas.planInfo?.tradePrice }}元/{{getLabel('sell_unit',datas.planDetail?.sellUnit)}}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划名称：">
                        {{ datas.planInfo?.planName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务期限：">
                        {{ dateFormat('yyyy-mm-dd',datas.planInfo?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配人：">
                        {{ creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分配时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allocation.ifAccept == 2 || allocation.ifAccept == 3">
                    <el-form-item :label="allocation.ifAccept == 2 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allocation.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <detail-drawer
                ref="detailDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span v-if="allocation.taskType == 1">区域招商</span>
                <span v-else-if="allocation.taskType == 2">精细招商</span>
                <span v-else-if="allocation.taskType == 3">终端直销</span>
                <span v-else-if="allocation.taskType == 4">商业营销</span>

            </template>
            <template #contents>

                <signedDetail v-if="allocation.taskType == 1" :id="datas.planDetail?.id"/>

                <fineDetail v-if="allocation.taskType == 2" :id="datas.planDetail?.id"/>

                <directDetail v-if="allocation.taskType == 3" :id="datas.planDetail?.id"/>

                <businessDetail v-if="allocation.taskType == 4" :id="datas.planDetail?.id"/>

            </template>
        </detail-drawer>

        <detail-drawer
                ref="priceDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span>产品终端价 - {{ datas.planInfo?.priceNumber }}</span>

            </template>
            <template #contents>

                <terminalPrice :id="datas.planInfo?.productPriceId" />

            </template>
        </detail-drawer>

    </div>
</template>

<script>
    import signedDetail from "../publicityDetail/signedDetail";
    import fineDetail from "../publicityDetail/fineDetail";
    import directDetail from "../publicityDetail/directDetail";
    import businessDetail from "../publicityDetail/businessDetail";
    import terminalPrice from "../product/terminalPrice";
    import { defineComponent, reactive, toRefs, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "taskConfirmView",
        components:{terminalPrice,signedDetail,fineDetail,directDetail,businessDetail},
        props:{
            id:{
                type:Object,
                default:0
            }
        },
        setup(props){
            const currentInstance = getCurrentInstance()
            const api = inject('api')

            var data = reactive({
                datas:{},
                allocation:{},
                detailDrawer:null,
                priceDrawer:null,
                creatorName:'',
                createdAt:'',
            })

            const getData = () => {
                // api.task.TASK_ALLOCATION_AGENT_DETAIL(props.id).then(res=>{
                //     if (!res.code){
                //         data.allocation = res.data
                //         if (res.data.relationData){
                //             data.datas = JSON.parse(res.data.relationData)
                //         }
                //
                //     }else {
                //         currentInstance.proxy.customMessage({type:'error',message:res.msg})
                //     }
                // })

                api.task.TASK_SALE_TASK_DETAIL(props.id).then(res=>{
                    if (!res.code){
                        data.allocation = res.data.data.saleTask;
                        if (res.data.data.saleTask.relationData){
                            data.datas = JSON.parse(res.data.data.saleTask.relationData)
                        }

                        if (res.data.data.allocation && res.data.data.allocation.length){
                            data.creatorName = res.data.data.allocation[0].creatorName
                            data.createdAt = res.data.data.allocation[0].createdAt
                        }
                    }else {
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const onPlan = () => {
                data.detailDrawer.open()
            }

            const priceClick = () => {
                data.priceDrawer.open()
            }

            onMounted(() => {
                getData()
            })

            return{
                ...toRefs(data),

                onPlan,
                priceClick,
            }
        }
    })
</script>

<style scoped>

</style>
